<template>
  <div class="chatgpt">
    <div class="chat-list-box">
      <div class="title-box">
        <div class="title-top">
          <h2>ChatGPT</h2>
        </div>
        <div class="title-type">
          <div class="type-item">
            <el-tag size="medium">当前用户状态: {{ userGrade == "" ? "未知" : userGrade }}</el-tag>
          </div>
          <div class="type-item">
            <el-tag size="medium" type="danger">注册普通用户和游客只享用每天五次提问</el-tag>
          </div>
          <div class="type-item">
            <el-tag size="medium" type="warning"><a href="">🔒 购买会员解锁权限</a></el-tag>
          </div>
          <div class="admin">
            <div class="admin-type-item">
              <el-tag size="medium" type="success"><a target="_blank" :href="require('../../../../assets/wechat.jpg')">🕴联系作者</a>
              </el-tag>
            </div>
            <div class="admin-type-item">
              <el-tag size="medium" type="success"><a target="_blank"
                                                      :href="require('../../../../assets/static/img/wx.jpg')">💵点击打赏我们</a>
              </el-tag>
            </div>
          </div>
        </div>
      </div>
      <div class="chat-list">
        <div class="chat-list-title">
          <span>聊天列表</span>
        </div>
        <div class="chat-list-box">
          <div v-for=" ChatItem in chatList" :key="ChatItem.id" class="chat-list-item" @click="clickChatItem(ChatItem)">
            <chat-list-item :ChatItem="ChatItem" :itemcurrent="itemCurrent" @changeChatListItem="changeChatListItem"/>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-view">
      <router-view :ChatGPTItem="ChatGPTItem"/>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import ChatListItem from "@/components/chat/chat-list-item";

export default {
  name: "ChatGPT",
  components: {ChatListItem},
  data() {
    return {
      user: {},
      userGrade: "",
      chatList: [{
        id: 1,
        name: "Chat🤖AI",
        imgUrl: require("../../../../assets/chat/ChatGPT.png"),
        detail: '欢迎你和我对话'
      },
        {
          id: 2,
          name: "AI绘画🎨",
          imgUrl: require("../../../../assets/chat/AiPainting.png"),
          detail: '创造你自己的画'
        }],
      itemCurrent: 1,
      ChatGPTItem: {},
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    roleName(role) {
      if (role == undefined) {
        this.userGrade = "未登录"
        return;
      }
      this.request.get("/role/getroleflag/" + role).then(res => {
        if (res.code == "200") {
          this.userGrade = res.data.name;
        }
      })
    },
    clickChatItem(item){
      switch (item.id){
        case 1:
          this.$router.push("/chat/chatgpt/")
          break;
        case 2:
          this.$router.push("/chat/chatgpt/ai-painting")
          break;
      }
    },
    changeChatListItem(id) {
      this.chatList.forEach(item => {
        if (item.id === id) {
          this.ChatGPTItem = item;
        }
      })
      this.itemCurrent = id;
    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.$router.push("/chat/chatgpt/")
    this.user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    this.roleName(this.user.role);
    this.changeChatListItem(1);
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style lang="less" scoped>

.chatgpt {
  display: flex;
  justify-content: space-between;

  .chat-list-box {
    width: 300px;
    height: 100%;

    display: flex;
    flex-direction: column;

    .title-box {
      width: 100%;
      height: 250px;
      display: flex;
      margin-top: 30px;
      flex-direction: column;
      justify-content: center;

      .title-top {
        h2 {
          font-size: 40px;
          font-weight: 800;
          color: white;
          letter-spacing: 3px
        }
      }

      .title-type {
        margin-top: 10px;
        display: flex;
        flex-direction: column;

        .type-item {
          margin: 3px 0;

          span {
            font-size: 15px;
          }
        }

        .admin {
          display: flex;

          .admin-type-item {
            margin-top: 3px;
            margin-right: 10px;

            span {
              font-size: 15px;
            }
          }
        }
      }
    }

    .chat-list {
      margin-top: 30px;
      flex: 1;
      display: flex;
      flex-direction: column;

      .chat-list-title {
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;

        span {
          font-size: 25px;
          color: #989aa6;

        }
      }

      .chat-list-box {
        height: 800px;
        margin-top: 30px;
        overflow: hidden;
        overflow-y: scroll;
        box-sizing: border-box;

        &::-webkit-scrollbar {
          width: 0;
          height: 0;
          display: none;
        }
      }
    }
  }

  .chat-view {
    flex: 0.99;
  }
}
</style>